<template>
	<view class="container">
		<view class="storeItem" v-for="(item,index) in appointmentGoodsList" :key="index">
			<image @click="toproduct(item.goodsId)" :src="item.goodsImg" class="storeImg" mode=""></image>
			<view class="context">
				<view class="ctxRow">
					<view style="max-width: 440rpx;">
						<view @click="toproduct(item.goodsId)" class="contentName">
							{{item.goodsName}}
						</view>
					</view>
					<!-- 	<view class="sale">
						月销量：4
					</view> -->
				</view>
				<view class="ctxRow" style="padding: 10px 0px;">
					<text class="price">￥{{item.shopPrice}}</text>
					<!-- <text class="fukPv">让利值199</text> -->
					<view class="commflex subtract">
						<image @click="add('minus','num',index,'0')" class="minus" v-show="item.num != 0" src="/static/minus.png" mode=""></image>
						<text class="number" v-show="item.num != 0">{{item.num}}</text>
						<image @click="add('add','num',index,'0')" :class="item.num ==0 ?'defaultadd':'add'" src="/static/add.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 40px;"></view>
		<view class="buy" @click="toappointment">立即购买</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				appointmentGoodsList: '',
				checkedlist: []
			};
		},
		onShow(){
			this.checkedlist = []
		},
		onLoad(options) {
			this.shopId = options.shopId
			this.getcartlist()
		},
		methods: {
			toproduct(id){
				uni.navigateTo({
					url:'/pages/product/product?id='+id
				})
			},
			toappointment() {
				let that = this;

				that.appointmentGoodsList.forEach(item => {
					if (item.num >= 1) {
						that.checkedlist.push(item)
					}
				})
				if (that.checkedlist.length == 0) {
					that.$api.msg('请添加需要购买的商品')
					return false;
				}
				uni.setStorageSync('checkedlist', that.checkedlist)
				uni.navigateTo({
					url: '/district/appointment/appointment?shopId=' + that.shopId
				})
			},
			deepCopy(val) {
				return JSON.parse(JSON.stringify(val))
			},
			add(property, val, index, type) {
				let that = this;
				let list = [];
				if (type == 0) {
					list = that.deepCopy(that.appointmentGoodsList);
				} else {
					list = that.deepCopy(that.subprojectlist);
				}
				switch (property) {
					case 'add':
						var ind = 'num'
						var num = list[index][ind]
						num++;
						list[index][ind] = num;
						that.appointmentGoodsList = that.deepCopy(list)
						// that.dplist = list[index].recommendGoodsList
						// that.ruleDesc = list[index].ruleDesc
						break;
						//点击的是箱还是件
					case 'minus':
						//点击的是箱还是件
						var nowIndex = 'num'
						var num = list[index][val];
						if (num == 0) {
							return false;
						}
						num--;
						list[index][val] = num;
						that.appointmentGoodsList = that.deepCopy(list)
						// that.dplist = list[index].recommendGoodsList
						// that.ruleDesc = list[index].ruleDesc
						break;
				}
				console.log(that.appointmentGoodsList)
			},
			getcartlist() {
				let that = this;
				let data = {
					shopId: this.shopId
				}
				that.$Request.request('/api/shop/shopDetail', 'GET', data).then(res => {
					if (res.status == 1) {
						that.appointmentGoodsList = res.data.appointmentGoodsList
						that.appointmentGoodsList.forEach(item => {
							item.num = 0;
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page,
	container {
		height: 100%;
		background-color: #F8F8F8;
	}

	.buy {
		color: #fff;
		background-color: #ff6600;
		width: 65%;
		text-align: center;
		margin: 0 auto;
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
	}

	.commflex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;

		.defaultadd {
			margin-left: 10px;
			width: 30upx;
			height: 30upx;
		}

		.number {
			font-size: 28upx;
			color: #999;
			display: inline-block;
			padding: 0px 5px;
		}

		.minus {

			// margin-left: 25px;
		}

		.add,
		.minus {
			width: 30upx;
			height: 30upx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.contentName {
		font-size: $uni-font-size-base;
		@extend %textover;
	}

	.desc {
		font-size: 24rpx;
		color: #808080;
		@extend %textover;
	}

	.sale {
		font-size: 20rpx;
		color: #808080;
	}

	.storeItem {
		width: 710rpx;
		margin: 20rpx auto 0;
		box-shadow: 0 0 5rpx rgba(#000000, 0.4);
		padding: 20rpx;
		border-radius: 10rpx;
		@extend %flexBetw;

		.storeImg {
			width: 130rpx;
			height: 130rpx;
			border-radius: 8rpx;
		}

		.context {
			width: 520rpx;

			.ctxRow {
				@extend %flexBetw;

				.price {
					font-size: $uni-font-size-lg;
					font-weight: bold;
					color: #ea390d;
				}

				.fukPv {
					background-color: #fbd8b0;
					font-size: $uni-font-size-sm;
					color: #ea390d;
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
</style>
